import { View, StyleSheet, Text, Image } from 'react-native';
import React, { Component, useState } from 'react';
import PropTypes from 'prop-types';

import { Avatar, Drawer } from 'react-native-material-ui';
import Container from './Container';
import { Tester, TestSuite, TestCase } from "@rnoh/testerino"

const DrawerDemo = () => {
  const imageComponent = <Image source={require('../image/avatar1.png')} style={{ resizeMode: "center" }}></Image>
  const [active,setActive] = useState(false)
  return (
    <Tester>
      <TestSuite name='Drawer'>
        <TestCase itShould='props:'>
          <View style={{ height: 600 }}>
            <View style={styles.container}>
              <Drawer style={{container:{backgroundColor:"#fff"}}}>
                <Drawer.Header backgroundColor='red'>
                  <Drawer.Header.Account
                    avatar={<Avatar text="A" />}
                    accounts={[
                      { avatar: <Avatar text="B" />, key: 'b' },
                      { avatar: <Avatar text="C" />, key: 'c' },
                    ]}
                    footer={{
                      dense: true,
                      centerElement: {
                        primaryText: 'Reservio',
                        secondaryText: 'business@email.com',
                      },
                      rightElement: 'arrow-drop-down',
                    }}
                    style={{container:{backgroundColor:'skyblue'}}}
                  />
                </Drawer.Header>
                <Drawer.Section
                  divider
                  items={[
                    { icon: 'bookmark-border', value: 'Notifications',label:'Notifications'},
                    { icon: 'today', value: 'Calendar', active: active },
                    { icon: 'people', value: 'Clients' },
                  ]}
                />
                <Drawer.Section
                  title="Personal"
                  items={[
                    { icon: 'info', value: 'Info' },
                    { icon: 'settings', value: 'Settings' },
                  ]}
                />
              </Drawer>
            </View>
          </View>

        </TestCase>
      </TestSuite>
    </Tester>
  )
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: "100%",
    elevation: 4,
    backgroundColor: 'white',

  },
});
export default DrawerDemo
